<template>
  <div class="detail-layout">
    <p class="title">{{ topicDetail.title }}</p>
    <p class="publishTime">{{ topicDetail.publish_time }}</p>
    <hr />
    <div class="contet" v-html="topicDetail.content_formatted"></div>
    <p class="source">{{ topicDetail.source }}</p>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import updateTdk from '../utils/tdk'
export default {
  name: 'Detail',
  data() {
    return {}
  },
  computed: {
    ...mapState(['topicDetail', 'topicsList'])
  },
  tdk() {
    return {
      title: this.topicDetail && this.topicDetail.title,
      keywords: this.topicDetail && this.topicDetail.title,
      description: this.topicDetail && this.topicDetail.title,
      ssrHeadAddInfo: `<link rel="canonical" href="https://www.shui12366.com">`
    }
  },
  serverPrefetch() {
    return this.fetchData()
  },
  mounted() {
    if (process.env.NODE_ENV === 'development') {
      this.fetchData().then(this.fetchDataMounted)
    }
  },
  destroyed() {
    this.$store.commit('SET_TOPIC_DETAIL', { detail: null })
  },
  methods: {
    // fetchData for client and server render
    fetchData() {
      this.$loading(true)
      return this.$store
        .dispatch('FETCH_TOPIC_DETAIL', {
          id: decodeURIComponent(decodeURIComponent(this.$route.params.id))
        })
        .finally(() => {
          this.$loading(false)
          updateTdk.call(this)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-layout {
  max-width: 600px;
  margin: 40px auto;
}
.publishTime,
.source {
  text-align: right;
}
</style>
